<template>
	<view class="changeInfo">
		<view class="img-box">
			<image class="img" :src="src" @click="chooseImg"></image>
			<view class="text">点击更换头像</view>
			<ksp-cropper v-if="isPhoto == 1" mode="fixed" :url="src" @cancel="oncancel" @ok="onok"></ksp-cropper>
		</view>
		<view class="seperator"></view>
		<view class="info-box">
			<view open-type="redirect" @click="updateUserName" class="text-box">
				<view class="left">昵称</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<view class="right">{{ user.userName }}</view>
			</view>
			<view open-type="redirect" @click="updateName" class="text-box">
				<view class="left">姓名</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<view class="right">{{ user.name }}</view>
			</view>
			<view open-type="redirect" @click="updatePhone" class="text-box">
				<view class="left">手机号</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<view class="right">{{ user.phone }}</view>
			</view>
			<view open-type="redirect" @click="updateEmail" class="text-box">
				<view class="left">邮箱</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<view class="right">{{ user.email }}</view>
			</view>
			<view open-type="redirect" @click="updateIntrduction" class="text-box">
				<view class="left">简介</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<view class="right">{{ user.introduction }}</view>
			</view>
			<picker :range="sex" @change="bindSexChange">
				<view class="text-box">
					<view class="left">性别</view>
					<view class="iconfont iconchangyongicon- icon-box"></view>
					<view class="right">{{ user.sex }}</view>
				</view>
			</picker>
			<picker mode="date" :value="user.birthday" @change="bindDateChange">
				<view class="text-box">
					<view class="left">生日</view>
					<view class="iconfont iconchangyongicon- icon-box"></view>
					<view class="right">{{ user.birthday }}</view>
				</view>
			</picker>
			<picker mode="region" @change="bindCityChange">
				<view class="text-box">
					<view class="left">地区</view>
					<view class="iconfont iconchangyongicon- icon-box"></view>
					<view class="right">{{ user.address }}</view>
				</view>
			</picker>
			<button class="save" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			src: '',
			user: {
				userName: '',
				phone: '',
				email: '',
				introduction: '',
				school: '',
				sex: '',
				birthday: '',
				address: '',
				address1: '',
				address2: '',
				address3: '',
				name: '',
				photoUrl: ''
			},
			sex: ['男', '女'],
			path:'',
			isPhoto:0
		};
	},
	methods: {
		save() {
			let that = this;
			let data = {
				photo: that.src.toString(),
				nickname: that.user.userName,
				name: that.user.name,
				tel: that.user.phone,
				email: that.user.email,
				introduction: that.user.introduction,
				sex: that.user.sex,
				birthday: that.user.birthday,
				address: that.user.address.toString()
			};
			that.ajax(that.url.updateUserInfo, 'POST', data, function(resp) {
				uni.showToast({
					icon: 'none',
					title: '保存成功！'
				});
				setTimeout(function(resp){
					uni.switchTab({
						url:'/pages/mine/mine'
					})
				}, 1200)
			});
		},
		updateUserName() {
			let that = this;
			uni.showModal({
				title: '修改昵称',
				placeholderText: '请输入昵称',
				editable: true,
				success: function(res) {
					if (res.confirm) {
						that.user.userName = res.content;
					}
				}
			});
		},
		updateName() {
			let that = this;
			uni.showModal({
				title: '修改姓名',
				placeholderText: '请输入姓名',
				editable: true,
				success: function(res) {
					if (res.confirm) {
						that.user.name = res.content;
					}
				}
			});
		},
		updatePhone() {
			let that = this;
			uni.showModal({
				title: '修改手机号',
				placeholderText: '请输入手机号',
				editable: true,
				success: function(res) {
					if (res.confirm) {
						that.user.phone = res.content;
					}
				}
			});
		},
		updateEmail() {
			let that = this;
			uni.showModal({
				title: '修改邮箱',
				placeholderText: '请输入邮箱',
				editable: true,
				success: function(res) {
					if (res.confirm) {
						that.user.email = res.content;
					}
				}
			});
		},
		updateIntrduction() {
			let that = this;
			uni.showModal({
				title: '修改个人简介',
				placeholderText: '请输入个人简介',
				editable: true,
				success: function(res) {
					if (res.confirm) {
						that.user.introduction = res.content;
					}
				}
			});
		},
		chooseImg() {
			uni.chooseImage({
				count: 1,
				sourceType: ['album'],
				sizeType: ['original', 'compressed'],
				success: res => {
					this.src = res.tempFilePaths[0];
					this.isPhoto = 1;
					uni.setStorage({
						key: 'photo',
						data: this.src
					});
				}
			});
		},
		onok(ev) {
			this.isPhoto = 0;
		    this.src = ev.path;
		},
		oncancel() {
		    // url设置为空，隐藏控件
			this.isPhoto = 0;
		    this.url = "";
		},
		bindSexChange(e) {
			this.user.sex = this.sex[e.target.value];
			uni.setStorage({
				key: 'sex',
				data: this.sex[e.target.value]
			});
		},
		bindDateChange(e) {
			this.user.birthday = e.target.value;
			uni.setStorage({
				key: 'birthday',
				data: e.target.value
			});
		},
		bindCityChange(e) {
			this.user.address1 = e.target.value[0];
			this.user.address2 = e.target.value[1];
			this.user.address3 = e.target.value[2];
			this.user.address = this.user.address1 + ',' + this.user.address2 + ',' + this.user.address3;
			uni.setStorage({
				key: 'address',
				data: e.target.value
			});
		}
	},
	onLoad() {
		let that = this;
		that.ajax(that.url.searchUserById, 'POST', {}, function(resp) {
			that.user.userName = resp.data.result[0].nickname;
			that.user.name = resp.data.result[0].name;
			that.user.phone = resp.data.result[0].tel;
			that.user.email = resp.data.result[0].email;
			that.user.sex = resp.data.result[0].sex;
			that.src = resp.data.result[0].photo;
			that.user.introduction = resp.data.result[0].introduction;
			that.user.birthday = resp.data.result[0].birthday;
			that.user.address = resp.data.result[0].address;
		});
	}
};
</script>

<style lang="less">
@import url('edit_personal_data.less');
</style>
